<layout
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{views/layout :: layout (
  page = 'post',
  title = ${post.spec.title},
  pin = ~{::pin},
  header = ~{::header},
  main = ~{::main}
  )}"
>
  <!--/* pin */-->
  <th:block th:fragment="pin">
    <style
      id="pageStyle"
      xmlns:th="https://www.thymeleaf.org"
      th:inline="css"
    >

    </style>
    <script id="pageScript" th:inline="javascript" th:with="above_background = ${not #strings.isEmpty(post.spec.cover) ? post.spec.cover : (theme.config.loading.img.random_enable ? theme.config.loading.img.random_link  : ''  )}">
      Object.assign(window.MainApp.conf, {
        // 第一屏
        enable_above: /*[[${theme.config.post.enable_above}]]*/ '',
        above_background: /*[[${above_background}]]*/ '',
        // 渲染
        enable_h_icon: /*[[${theme.config.render.enable_h_icon}]]*/ true,
        // 代码块
        enable_code: /*[[${theme.config.render.enable_code}]]*/ true,
        enable_code_copy: /*[[${theme.config.render.enable_code_copy}]]*/ true,
        enable_code_expander: /*[[${theme.config.render.enable_code_expander}]]*/ true,
        enable_code_title: /*[[${theme.config.render.enable_code_title}]]*/ true,
        enable_code_hr: /*[[${theme.config.render.enable_code_hr}]]*/ true,
        enable_code_line: /*[[${theme.config.render.enable_code_line}]]*/ true,
      });
      // 文章页面 自定义元数据
      Object.assign(window.MainApp.attrs, {
        enable_code_copy: /*[[${#annotations.getOrDefault(post, 'enable_code_copy','true')}]]*/ true,
      });
    </script>
    <link rel="preload stylesheet" as="style" th:href="${assets_link + 'plugins/prism/prism.min.css'}">
    <link rel="preload stylesheet" as="style" id="codeLight" th:href="${assets_link + 'plugins/prism/themes/prism-' + theme.config.render.code_theme_light + '.css'}">
    <link rel="preload stylesheet" as="style" id="codeDark" th:href="${assets_link + 'plugins/prism/themes/prism-' + theme.config.render.code_theme_dark + '.css'}">
    <script type="text/javascript" th:src="${assets_link + 'plugins/prism/prism.min.js'}"></script>
  </th:block>

  <th:block th:fragment="header">
    <header th:class="${not theme.config.post.enable_above ? 'header dp' : 'header'}">
      <!--/* 导航栏 */-->
      <th:block th:replace="~{views/nav}"/>

      <!--第一屏内容-->
      <section class="above" th:if="${theme.config.post.enable_above}">
        <div class="above-info">
          <h1 class="post-title" th:text="${post.spec.title}"></h1>
          <ul class="post-meta">
            <li class="row">
            <span class="wp category" th:if="${not #lists.isEmpty(post.categories)}">
                <i class="fa-solid fa-layer-group"></i>
                <span class="cys">
                  <th:block th:each="cy : ${post.categories}">
                    <a class="lk" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>
                  </th:block>
                </span>
            </span>
              <span class="wp tag" th:if="${not #lists.isEmpty(post.categories)}">
               <i class="fa-duotone fa-tags"></i>
                <span class="cys">
                  <th:block th:each="cy : ${post.tags}">
                    <a class="lk" th:href="${cy.status.permalink}" th:text="${cy.spec.displayName}"></a>
                  </th:block>
                </span>
            </span>
            </li>

            <li class="row">
              <span class="wp publishTime">
                  <i class="fa-solid fa-calendar-days"></i>
                  <time th:text="'发布于 '+${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"></time>
              </span>

              <span class="wp lastModifyTime">
                  <i class="fas fa-history fa-fw"></i>
                  <time th:text="'更新于 '+${#dates.format(post.status.lastModifyTime, 'yyyy-MM-dd')}"></time>
              </span>
            </li>

            <li class="row">
              <span class="wp wordCount">
                <i class="fa-solid fa-list-ol"></i>
                <span>字数总计 -- 字</span>
              </span>

              <span class="wp clock">
                 <i class="fa-regular fa-clock"></i>
                <span>阅读时长 -- 分钟</span>
              </span>

              <span class="wp visit">
                <i class="far fa-eye fa-fw"></i>
                <span th:text="'阅读量 '+${post.stats.visit} + ' 人'"></span>
              </span>
            </li>
          </ul>
        </div>
      </section>
    </header>
  </th:block>

  <!--/* 內容 */-->
  <th:block th:fragment="main">
    <section class="content card">
      <article class="render" th:utext="${post.content.content}"></article>

      <div class="copy-right">
        <i class="fa-solid fa-copyright"></i>

        <div class="author">
          <span class="name">文章作者：</span>
          <span class="text" th:text="${contributor.displayName}"></span>
        </div>

        <div class="url">
          <span class="name">本文链接：</span>
          <span class="text"><a class="permalink" target="_blank"></a></span>
        </div>


        <div class="declaration">
          <span class="name">版权声明：</span>
          <span class="text">本站所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="/" target="_blank" th:text="${contributor.displayName}"></a>！</span>
        </div>
      </div>

      <halo:comment
        th:if="${pluginFinder.available('PluginCommentWidget') && haloCommentEnabled && post.spec.allowComment}"
        group="content.halo.run"
        kind="Post"
        th:attr="name=${post.metadata.name}"
      />
    </section>
    <th:block th:replace="~{views/aside::post}"/>
  </th:block>
</layout>